<template>
    <div class="choiceness">
        <van-tabbar class="bd" v-model="active" active-color="red" @change="changeTabber">
            <van-tabbar-item class="bd" route v-for="menu of tabbarList" :key="menu.id" :icon="menu.icon" :abc="menu" :name="menu.name">{{
                menu.title }}</van-tabbar-item>
        </van-tabbar>
        <div class="box">
            <Router-View></Router-View>

        </div>
    </div>
</template>
<script>

export default {
    name: "home",
    data() {
        return {
            tabbarList: [
                { id: "1", title: "精选", icon: "good-job-o", name: "/choiceness" },
                {
                    id: "2",
                    title: "分类",
                    icon: "apps-o",
                    name: "/classify",
                },
                {
                    id: "3",
                    title: "购物车",
                    icon: "shopping-cart-o",
                    name: "/trolley",
                },
                { id: "4", title: "我的", icon: "friends-o", name: "/mains" },
            ],
            active: '/choiceness',
        };
    },
    methods: {
        changeTabber(name,abc) {
            console.log(name);
            localStorage.setItem("active", name);
            this.active = name

            this.$router.push({ path:name})
        }
    },
    mounted() {
        console.log("/"+this.$route.name)
        this.active = "/"+this.$route.name
    }
}
</script>
<style lang="scss">
#app {
    height: 100vh;
}

.box {
    height: calc(100vh - 50px);
    // font-size: 4.8vw;
    // overflow-y: o auto;
    overflow: scroll;
}

.van-tabbar-item--active {
    color: red !important;
    background-color: #fff;
}
</style>